<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>知乎</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <!-- 外部css文件 -->

    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="../../static/js/header.js" th:src="@{/js/header.js}"></script>
    <!--script写在fragment内否则不被引用-->
</head>


<div th:fragment="recommendList"
    style="padding:20px 10px 20px 20px;border-bottom:solid;border-width: 1px;border-color: #f0f2f7">
    <link rel="stylesheet" type="text/css" href="style.css" th:href="@{/css/style.css}">


    <style>
        .contentImg {
            word-wrap: break-word;
            float: right;
            width: 474px;
            padding-left: 2px;
            padding-top: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }

        .contentNoImg {
            word-wrap: break-word;
            float: right;
            width: 474px;
            padding-left: 2px;
            padding-top: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .right{
            color: #8590a6;
        }
    </style>

    <div th:id="${answerList.id}" class="answerList">
        <div class="question">
            <a th:id="${answerList.questionid}" th:href="@{'http://localhost:8080/questionPage?questionid='+${answerList.questionid}}" style="font-weight:bold;font-size: 20px;color: black"
                th:text="${answerList.questionname}">请问厦门理工学院怎么样？</a>
        </div>
        <div class="RichContent">
            <div class="FullContent" style="display: inline-block;">
                <!--图片显示-->
                <div style="float: left;margin-top: 5px;border-radius:10px;background-color: red;"
                    th:if="${not #strings.isEmpty(answerList.image)}">
                    <img src="" style="height: 105px;width:190px;">
                </div>

                <div class="contentImg" th:if="${not #strings.isEmpty(answerList.image)}">
                    <span th:text="${answerList.username}"></span>:
                    <a href="#" style="color: black" th:utext="${answerList.content}">有图片显示四行</a>
                </div>

                <div class="contentNoImg" th:unless="${not #strings.isEmpty(answerList.image)}">
                    <span th:text="${answerList.username}"></span>:
                    <a href="#" style="color: black" >
                        <div th:utext="${answerList.content}">无图片显示两行</div>
                    </a>
                </div>
            </div>


            <div class="ContentItem-time" title="发布于 2019-07-07 19:20" th:title="${answerList.answertime}"
                style="color: #8590a6;margin-bottom:5px;">发布于2019.07.07</div>


            <div class="ContentItem-actions">
                <button th:onclick="|agree(${answerList.id})|"><span
                        style="display: inline-flex; align-items: center;">​<svg
                            class="Zi Zi--TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24"
                            width="10" height="10">
                            <path
                                d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z"
                                fill-rule="evenodd"></path>
                        </svg></span><span class="agree">赞同</span>
                    <span class="agreeNum"></span>
                </button>
                <button><svg class="Zi Zi--TriangleDown" fill="currentColor" viewBox="0 0 24 24" width="10" height="10">
                        <path
                            d="M20.044 3H3.956C2.876 3 2 3.517 2 4.9c0 .326.087.533.236.896L10.216 19c.355.571.87 1.143 1.784 1.143s1.429-.572 1.784-1.143l7.98-13.204c.149-.363.236-.57.236-.896 0-1.386-.876-1.9-1.956-1.9z"
                            fill-rule="evenodd"></path>
                    </svg></button>
                <div class="btn-gourp  right">
                    <button type="button" class="right" th:onclick="|show(${answerList.id})|"><span
                            style="display: inline-flex; align-items: center;">​<svg class="Zi Zi--Comment Button-zi"
                                fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em">
                                <path
                                    d="M10.241 19.313a.97.97 0 0 0-.77.2 7.908 7.908 0 0 1-3.772 1.482.409.409 0 0 1-.38-.637 5.825 5.825 0 0 0 1.11-2.237.605.605 0 0 0-.227-.59A7.935 7.935 0 0 1 3 11.25C3 6.7 7.03 3 12 3s9 3.7 9 8.25-4.373 9.108-10.759 8.063z"
                                    fill-rule="evenodd"></path>
                    </svg></span><span class="comment"><span th:text="${answerList.commenttimes}"></span>条评论</span></button>

                    <button type="button" class="right"><span style="display: inline-flex; align-items: center;">​<svg
                                class="Zi Zi--Share Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em"
                                height="1.2em">
                                <path
                                    d="M2.931 7.89c-1.067.24-1.275 1.669-.318 2.207l5.277 2.908 8.168-4.776c.25-.127.477.198.273.39L9.05 14.66l.927 5.953c.18 1.084 1.593 1.376 2.182.456l9.644-15.242c.584-.892-.212-2.029-1.234-1.796L2.93 7.89z"
                                    fill-rule="evenodd"></path>
                            </svg></span><span class="share">分享</span></button>
                    <button type="button" class="right"><span style="display: inline-flex; align-items: center;">​<svg
                                class="Zi Zi--Star Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em"
                                height="1.2em">
                                <path
                                    d="M5.515 19.64l.918-5.355-3.89-3.792c-.926-.902-.639-1.784.64-1.97L8.56 7.74l2.404-4.871c.572-1.16 1.5-1.16 2.072 0L15.44 7.74l5.377.782c1.28.186 1.566 1.068.64 1.97l-3.89 3.793.918 5.354c.219 1.274-.532 1.82-1.676 1.218L12 18.33l-4.808 2.528c-1.145.602-1.896.056-1.677-1.218z"
                                    fill-rule="evenodd"></path>
                            </svg></span><span class="collect">收藏</span></button>
                    <button type="button" class="right"><span style="display: inline-flex; align-items: center;">​<svg
                                class="Zi Zi--Heart Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em"
                                height="1.2em">
                                <path
                                    d="M2 8.437C2 5.505 4.294 3.094 7.207 3 9.243 3 11.092 4.19 12 6c.823-1.758 2.649-3 4.651-3C19.545 3 22 5.507 22 8.432 22 16.24 13.842 21 12 21 10.158 21 2 16.24 2 8.437z"
                                    fill-rule="evenodd"></path>
                            </svg></span>感谢</button>
                    <div class="btn-group">

                        <button type="button" class="right" data-toggle="dropdown">
                            <span style="display: inline-flex; align-items: center;">​<svg class="Zi Zi--Dots Button-zi"
                                    fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em">
                                    <path
                                        d="M5 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
                                        fill-rule="evenodd"></path>
                                </svg></span></button>
                        <div class="dropdown-menu" style="min-width: 100px;padding: 15px;font-size: 15px;">
                            <a class="dropdown-item" href="#">没有帮助</a>
                            <a class="dropdown-item" href="#">举报&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                            <a class="dropdown-item" href="#">不感兴趣</a>
                        </div>
                    </div>
                </div>
            </div>




            <!--评论框-->
            <div class="commentBox" style="width: 100%;margin-top: 10px;border:2px solid #ebebeb;display: none;">
                <div class="commentDetails" >
                    <div style="padding-left:10px;border:1px solid #f7f7f7; width: 100%;">
                        <h4><span th:text="${answerList.commenttimes}">509</span>条评论</h4>
                    </div>
                    <div style="border:1px solid #f7f7f7;">
                        <div class="commentDetails-Item" style="margin-left: 10px; padding: 10px 20px 0 10px;">
                            <div>
                                <span>头像</span>
                                <span>透明人</span>
                            </div>
                            <div style="margin-left: 30px;">
                                <span>评论内容</span>
                                <div>
                                    <span>用户1</span>回复<span>用户2</span>
                                </div>
                            </div>

                        </div>
                        <!-- <div class="CommentItemV2-footer" style="margin-bottom: 10px">
                            <button type="button" class="Button CommentItemV2-likeBtn Button--plain">
                                <span style="display: inline-flex; align-items: center;margin-left: 50px;">​
                                    <svg class="Zi Zi--Like" fill="currentColor" viewBox="0 0 24 24" width="16" height="16"
                                        style="margin-right: 5px;">
                                        <path
                                            d="M14.445 9h5.387s2.997.154 1.95 3.669c-.168.51-2.346 6.911-2.346 6.911s-.763 1.416-2.86 1.416H8.989c-1.498 0-2.005-.896-1.989-2v-7.998c0-.987.336-2.032 1.114-2.639 4.45-3.773 3.436-4.597 4.45-5.83.985-1.13 3.2-.5 3.037 2.362C15.201 7.397 14.445 9 14.445 9zM3 9h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1z"
                                            fill-rule="evenodd"></path>
                                    </svg>
                                </span>
                                赞
                            </button>
                            <button type="button" class="Button CommentItemV2-hoverBtn Button--plain">
                                <span style="display: inline-flex; align-items: center;margin-left: 10px;">​
                                    <svg class="Zi Zi--Reply" fill="currentColor" viewBox="0 0 24 24" width="16" height="16"
                                        style="margin-right: 5px;">
                                        <path
                                            d="M22.959 17.22c-1.686-3.552-5.128-8.062-11.636-8.65-.539-.053-1.376-.436-1.376-1.561V4.678c0-.521-.635-.915-1.116-.521L1.469 10.67a1.506 1.506 0 0 0-.1 2.08s6.99 6.818 7.443 7.114c.453.295 1.136.124 1.135-.501V17a1.525 1.525 0 0 1 1.532-1.466c1.186-.139 7.597-.077 10.33 2.396 0 0 .396.257.536.257.892 0 .614-.967.614-.967z"
                                            fill-rule="evenodd"></path>
                                    </svg>
                                </span>
                                <span class="response" th:onclick="|response(${answerList.id})|">回复</span>
                            </button>
                            <button type="button" class="Button CommentItemV2-hoverBtn Button--plain">
                                <span style="display: inline-flex; align-items: center;margin-left: 10px;">​
                                    <svg class="Zi Zi--Like" fill="currentColor" viewBox="0 0 24 24" width="16" height="16"
                                        style="transform: rotate(180deg); margin-right: 5px;">
                                        <path
                                            d="M14.445 9h5.387s2.997.154 1.95 3.669c-.168.51-2.346 6.911-2.346 6.911s-.763 1.416-2.86 1.416H8.989c-1.498 0-2.005-.896-1.989-2v-7.998c0-.987.336-2.032 1.114-2.639 4.45-3.773 3.436-4.597 4.45-5.83.985-1.13 3.2-.5 3.037 2.362C15.201 7.397 14.445 9 14.445 9zM3 9h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1z"
                                            fill-rule="evenodd"></path>
                                    </svg>
                                </span>
                                踩
                            </button>
                            <button type="button" class="Button CommentItemV2-hoverBtn Button--plain">
                                <span style="display: inline-flex; align-items: center;margin-left: 10px;">​
                                    <svg class="Zi Zi--Report" fill="currentColor" viewBox="0 0 24 24" width="16"
                                        height="16" style="margin-right: 5px;">
                                        <path
                                            d="M19.947 3.129c-.633.136-3.927.639-5.697.385-3.133-.45-4.776-2.54-9.949-.888-.997.413-1.277 1.038-1.277 2.019L3 20.808c0 .3.101.54.304.718a.97.97 0 0 0 .73.304c.275 0 .519-.102.73-.304.202-.179.304-.418.304-.718v-6.58c4.533-1.235 8.047.668 8.562.864 2.343.893 5.542.008 6.774-.657.397-.178.596-.474.596-.887V3.964c0-.599-.42-.972-1.053-.835z"
                                            fill-rule="evenodd"></path>
                                    </svg>
                                </span>
                                举报
                            </button>
                        </div> -->
                        <div class="replyBox" style="margin:0 0 0 20px;display: none;">
                            <div style="width: 100%;">
                                <textarea style="width: 90%;height: 80px;"></textarea>
                                <button>发布</button>
                            </div>
                        </div>
                    </div>

                </div>

                <input class="commentInput" type="text" placeholder="评论..." >
                <button class="btn" th:onclick="|commenting(${answerList.id})|">发布</button>
            </div>





        </div>
    </div>


    <script>
        function agree(answerId) {
            alert(answerId);
            var content = $("#" + answerId + " .agree").text();
            // var isoppose = $("#" + answerId + " .oppose").text();
            if (content == "赞同"){
                $.ajax({
                    type:"post",
                    data:{"kind":1,"answerid":answerId},
                    url:"http://localhost:8080/addAprove",
                    success:function (result) {
                        $("#" + answerId + " .agree").html("取消赞同")
                    },
                    error:function (result) {
                        alert("未知错误")
                    }
                })

            }
            else{
                $.ajax({
                    type:"post",
                    data:{"kind":0,"answerid":answerId},
                    url:"http://localhost:8080/addAprove",
                    success:function (result) {
                        $("#" + answerId + " .agree").html("赞同")
                    },
                    error:function (result) {
                        alert("未知错误")
                    }
                })
            }
        }

        /**
         * 1.展示评论内容
         * 2.显示回复内容
         * */
        // function show(answerId) {
        //     alert(answerId)
        //     $.ajax({
        //        type:"post",
        //        data:{"answerid":answerId},
        //        dataType : "json",
        //        url:"http://localhost:8080/getComments",
        //         success:function (result) {
        //             $("#" + answerId + " .commentDetails").toggle();
        //             function getReplies(bearticleid) {
        //                 alert("获取回复内容");
        //                 $.ajax({
        //                    type:"post",
        //                     data:{"bearticleid":bearticleid},
        //                     url:"http://localhost:8080/getReplies",
        //                     success:function (result) {
        //                         alert("获取成功")
        //                     },
        //                     error:function (result) {
        //                         alert("获取失败")
        //                     }
        //                 });
        //             }
        //         }
        //     });
        //
        // }


        /**
         * 回复
         * */
        function response(answerId) {
            var responserId = getCookie('zhihuid')
            var content = $("#" + answerId + " .response").text();
            if (content == "回复")
                $("#" + answerId + " .response").html("取消回复")
            else
                $("#" + answerId + " .response").html("回复")
            console.log(content)
            console.log(responserId);
            console.log(answerId)
            $("#" + answerId + " .replyBox").toggle();


        }

        function getCookie(name) {
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

            if (arr = document.cookie.match(reg))

                return unescape(arr[2]);
            else
                return null;
        }
    </script>
    <script th:inline="javascript">

        /*<![CDATA[*/
        function show(answerId) {
            alert(answerId)
            $.ajax({
                type: "post",
                data: { "answerid": answerId },
                url: "http://localhost:8080/getComments",
                success: function (result) {
                    var commentlist = result.data
                    var part = ""
                    var icon = ""
                        for (var i = 0; i < commentlist.length; i++) {
                            icon = "<img class=\"img-circle\" style=\"width:40px;height:40px;\" src=\""+commentlist[i].dpPath+" \"  "

                            part = part +
                        "<div>\n" +
                        "    <span> "+icon+"  </span>\n" +
                        "    <span style='margin-left:5px;' '>"+commentlist[i].username+"</span>\n" +
                        "     </div>\n" +
                        "     <div style=\"margin-left: 30px;\">\n" +
                        "     <span style='margin-left: 20px;'>"+commentlist[i].content+"</span>\n" +
                        "      </div>"

                        part = part + '<div class="CommentItemV2-footer" style="margin-bottom: 10px">' +
                            '<button type="button" class="Button CommentItemV2-likeBtn Button--plain">' +
                            '     <span style="display: inline-flex; align-items: center;margin-left: 50px;">​' +
                            '     <svg class="Zi Zi--Like" fill="currentColor" viewBox="0 0 24 24" width="16" height="16" style="margin-right: 5px;">' +
                            '       <path d="M14.445 9h5.387s2.997.154 1.95 3.669c-.168.51-2.346 6.911-2.346 6.911s-.763 1.416-2.86 1.416H8.989c-1.498 0-2.005-.896-1.989-2v-7.998c0-.987.336-2.032 1.114-2.639 4.45-3.773 3.436-4.597 4.45-5.83.985-1.13 3.2-.5 3.037 2.362C15.201 7.397 14.445 9 14.445 9zM3 9h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1z" fill-rule="evenodd"></path>' +
                            '     </svg>' +
                            '     </span> 赞' +
                            ' </button>' +
                            '  <button type="button" class="Button CommentItemV2-hoverBtn Button--plain">' +
                            '             <span style="display: inline-flex; align-items: center;margin-left: 10px;">​' +
                            '                <svg class="Zi Zi--Reply" fill="currentColor" viewBox="0 0 24 24" width="16" height="16" style="margin-right: 5px;">' +
                            '                   <path d="M22.959 17.22c-1.686-3.552-5.128-8.062-11.636-8.65-.539-.053-1.376-.436-1.376-1.561V4.678c0-.521-.635-.915-1.116-.521L1.469 10.67a1.506 1.506 0 0 0-.1 2.08s6.99 6.818 7.443 7.114c.453.295 1.136.124 1.135-.501V17a1.525 1.525 0 0 1 1.532-1.466c1.186-.139 7.597-.077 10.33 2.396 0 0 .396.257.536.257.892 0 .614-.967.614-.967z" fill-rule="evenodd"></path>' +
                            '                 </svg>' +
                            '            </span>' +
                            '       <span class="response" th:onclick="|response(${answerList.id})|">回复</span>' +
                            '  </button>' +
                            '   <button type="button" class="Button CommentItemV2-hoverBtn Button--plain">' +
                            '              <span style="display: inline-flex; align-items: center;margin-left: 10px;">​' +
                            '                   <svg class="Zi Zi--Like" fill="currentColor" viewBox="0 0 24 24" width="16" height="16" style="transform: rotate(180deg); margin-right: 5px;">' +
                            '                      <path d="M14.445 9h5.387s2.997.154 1.95 3.669c-.168.51-2.346 6.911-2.346 6.911s-.763 1.416-2.86 1.416H8.989c-1.498 0-2.005-.896-1.989-2v-7.998c0-.987.336-2.032 1.114-2.639 4.45-3.773 3.436-4.597 4.45-5.83.985-1.13 3.2-.5 3.037 2.362C15.201 7.397 14.445 9 14.445 9zM3 9h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1z" fill-rule="evenodd"></path>' +
                            '                  </svg>' +
                            '             </span>' +
                            '    踩' +
                            ' </button>' +
                            '  <button type="button" class="Button CommentItemV2-hoverBtn Button--plain">' +
                            '             <span style="display: inline-flex; align-items: center;margin-left: 10px;">​' +
                            '                <svg class="Zi Zi--Report" fill="currentColor" viewBox="0 0 24 24" width="16" height="16" style="margin-right: 5px;">' +
                            '                     <path d="M19.947 3.129c-.633.136-3.927.639-5.697.385-3.133-.45-4.776-2.54-9.949-.888-.997.413-1.277 1.038-1.277 2.019L3 20.808c0 .3.101.54.304.718a.97.97 0 0 0 .73.304c.275 0 .519-.102.73-.304.202-.179.304-.418.304-.718v-6.58c4.533-1.235 8.047.668 8.562.864 2.343.893 5.542.008 6.774-.657.397-.178.596-.474.596-.887V3.964c0-.599-.42-.972-1.053-.835z" fill-rule="evenodd"></path>' +
                            '                   </svg>' +
                            '              </span>' +
                            '       举报' +
                            '    </button>' +
                            ' </div>' +
                            '</div>'

                        //无效
                        // part = part+'<div th:replace="common/card/commentCard :: commentCard(${"'+commentlist[i].username+'"},${"'+commentlist[i].content+'"})></div>'
                        // console.log(part);
                    }


                    /*]]>*/
                    $("#" + answerId+" .commentDetails-Item").html(part);
                    $("#" + answerId + " .commentBox").toggle();

                }
            });

        }

        function commenting(answerid){
            var criticsid = getCookie('zhihuid')
            var content = $("#" + answerid +" .commentInput").val()
            alert(content)
            alert(answerid)
            alert(criticsid)
            $.ajax({
                type:"post",
                data:{
                    "content":content,
                    "criticsid":criticsid,
                    "answerid":answerid,
                    "bearticleid":criticsid
                },
                dataType:"json",
                url:"http://localhost:8080/commenting",
                success:function (result) {
                    alert(result)
                },
                error:function (result) {
                }

            })
        }
    </script>
</div>

</html>